import { HeartTwoTone } from '@ant-design/icons';
import { useState } from 'react';
import { useLocation } from 'react-router-dom';
import WW from '../Canjink';
import Mggg from './Mggg';
interface gzS {
    count: number,
    gsS: string,
}
interface livF {
    plues: number,
    lov: number,
    kikk: string,
}
interface t {
    abstrucont: string,
    avatar: string,
    cover: string,
    descc: string,
    fans: number,
    lov: number,
    nickname: string,
    pulses: number,
    supports: number,
    tag: string,
    title: string,
    views: number


}
function RightUp({ cover, views, pulses, abstrucont, fans, avatar, descc, lov, nickname, title}: t) {
    //这里在重新复制一下
       console.log('66666',cover)
    //   console.log(cover[0].tags);
    const [contt, setCot] = useState<gzS>({ count: 1, gsS: '关注' })
    function addFn() {
        let newS = { ...contt }
        if (newS.gsS == '关注') {
            newS.gsS = '已关注'
            newS.count++
            console.log(newS.count);
            setCot(newS)
        } else {
            newS.gsS = '关注'
            newS.count--
            setCot(newS)
        }

    }
    const [likF, setlikF] = useState<livF>({ plues: 88.34, lov: 8, kikk: '喜欢' })
    function FnLike() {
        let newlike = { ...likF }
        if (newlike.kikk == '喜欢') {
            newlike.kikk = '已喜欢'
            newlike.lov++
            newlike.plues++
            setlikF(newlike)
        } else {
            newlike.kikk = '喜欢'
            newlike.lov--
            newlike.plues--
            setlikF(newlike)
        }
    }
    //点击采集就会出现弹框
    const [gathe, setGather] = useState<boolean>(false)
    return (
        <div>
            <div className="RightU">
                <ul>
                    <li className="RightDemo1">
                        <div className="RightDemo11">
                            <div className="ImgToR">
                                <a href="#">  <img src={`${avatar}`} /></a>
                            </div>
                            <div>
                                <div className="nickN"><a href="#">{nickname}</a></div>
                                <div className="nickN1">{fans}
                                <span>名追随者</span>
                                </div>
                            </div>
                        </div>
                        <div className="gzRiht" onClick={addFn}>{contt.gsS}</div>
                    </li>
                    <li className="RightDemo2">
                        <div>
                            <div className="Lik">{likF.plues}</div>
                            <div className="yM"><HeartTwoTone twoToneColor="#eb2f96" />最高脉冲指数</div>
                        </div>
                        <div className='Lla'>
                            <div>{views}<span>浏览</span></div>
                            <div>{likF.lov} <span>喜欢</span></div>
                            <div>123<span>评论</span></div>
                        </div>
                    </li>
                    <li className="RightDemo3">
                        <div>{title}</div>
                        <div>{descc}</div>
                    </li>
                    <li className="RightDemo4">
                        <div>类别</div>
                        <div>纪实</div>
                    </li>
                    <li className="RightDemo5">
                        <div>品牌:<span>NO MAKE</span></div>
                        <div>型号:<span>NO MODEL</span></div>
                        <div>焦距:<span>NO FOCAL LENGTH</span></div>
                        <div>光圈:<span>NO APERTURE</span></div>
                        <div>快门速度:<span>NO SHUTTER SPEED</span></div>
                        <div>ISO:<span>NO ISO SPEED RATINGS</span></div>
                        <div>曝光补偿:<span>NO EXPOSURE BIAS</span></div>
                        <div>亮度:<span>NO EXPOSURE BIAS</span></div>
                    </li>
                    {/* <button className='Btn'>我想购买</button> */}
                    <div><Mggg /></div>
                    <div className='Lc'>
                        <div onClick={FnLike}>{likF.kikk}</div>
                        <div onClick={() => setGather(true)}>采集</div>
                    </div>
                </ul>
            </div>
            <div style={{ display: (gathe ? 'block' : 'none') }}  >
                {/* 这里使用的是父向子传值，并且实现的反向数据流 */}
                <WW gathe={gathe} setGather={setGather} />
            </div>


        </div>
    )
}
export default RightUp;